<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>预警设置 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-cog me-2"></i>预警设置</h2>
            <div class="d-flex gap-2">
                <a th:href="@{/alerts}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>返回预警中心
                </a>
            </div>
        </div>

        <!-- 设置说明 -->
        <div class="alert alert-info mb-4">
            <i class="fas fa-info-circle me-2"></i>
            <strong>预警规则说明：</strong>系统会根据您的营养摄入情况自动生成预警信息，帮助您保持健康的饮食习惯。
        </div>

        <div class="row">
            <!-- 当前预警规则 -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-rules me-2"></i>当前预警规则</h5>
                    </div>
                    <div class="card-body">
                        <!-- 高优先级预警规则 -->
                        <div class="mb-4">
                            <h6 class="text-danger">
                                <i class="fas fa-exclamation-circle me-1"></i>高优先级预警
                            </h6>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">热量摄入超过推荐值的150%</li>
                                <li class="list-group-item">热量摄入低于推荐值的50%</li>
                                <li class="list-group-item">蛋白质摄入低于推荐值的60%</li>
                                <li class="list-group-item">脂肪摄入超过推荐值的140%</li>
                            </ul>
                        </div>

                        <!-- 中优先级预警规则 -->
                        <div class="mb-4">
                            <h6 class="text-warning">
                                <i class="fas fa-exclamation-triangle me-1"></i>中优先级预警
                            </h6>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">热量摄入超过推荐值的130%</li>
                                <li class="list-group-item">热量摄入低于推荐值的70%</li>
                                <li class="list-group-item">蛋白质摄入低于推荐值的80%</li>
                                <li class="list-group-item">脂肪摄入超过推荐值的120%</li>
                                <li class="list-group-item">碳水化合物摄入超过推荐值的130%</li>
                            </ul>
                        </div>

                        <!-- 低优先级预警规则 -->
                        <div class="mb-4">
                            <h6 class="text-info">
                                <i class="fas fa-info-circle me-1"></i>低优先级预警
                            </h6>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">热量摄入超过推荐值的110%</li>
                                <li class="list-group-item">热量摄入低于推荐值的90%</li>
                                <li class="list-group-item">蛋白质摄入低于推荐值的90%</li>
                                <li class="list-group-item">脂肪摄入超过推荐值的110%</li>
                                <li class="list-group-item">碳水化合物摄入超过推荐值的110%</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 预警统计 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>预警统计</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center">
                            <canvas id="alertSettingsChart" height="200"></canvas>
                        </div>
                        <div class="mt-3">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-danger">高优先级</span>
                                <span id="highCount">-</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-warning">中优先级</span>
                                <span id="mediumCount">-</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-info">低优先级</span>
                                <span id="lowCount">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功能说明 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>功能说明</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                自动监测营养摄入
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                智能预警提醒
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                个性化建议
                            </li>
                            <li>
                                <i class="fas fa-check text-success me-2"></i>
                                历史趋势分析
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script layout:fragment="scripts">
        // 加载预警统计数据
        function loadAlertStatistics() {
            fetch('/alerts/api/statistics?days=30')
                .then(response => response.json())
                .then(data => {
                    const statistics = data.statistics;
                    
                    // 更新数字显示
                    document.getElementById('highCount').textContent = statistics.high;
                    document.getElementById('mediumCount').textContent = statistics.medium;
                    document.getElementById('lowCount').textContent = statistics.low;
                    
                    // 绘制图表
                    const ctx = document.getElementById('alertSettingsChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'doughnut',
                        data: {
                            labels: ['高优先级', '中优先级', '低优先级'],
                            datasets: [{
                                data: [statistics.high, statistics.medium, statistics.low],
                                backgroundColor: ['#dc3545', '#ffc107', '#17a2b8'],
                                borderWidth: 2,
                                borderColor: '#fff'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading statistics:', error);
                });
        }

        // 页面加载时执行
        document.addEventListener('DOMContentLoaded', function() {
            loadAlertStatistics();
        });
    </script>
</body>
</html>
